<template>
  <div>
    <a-button type="primary">添加用户</a-button>
    <div class="table">
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :rowKey="
          (record, index) => {
            return index;
          }
        "
      >
        <template slot="options" slot-scope="text">
          <a>{{ text }}</a>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "角色名称",
          dataIndex: "roleName",
          key: "roleName",
        },
        {
          title: "角色描述",
          dataIndex: "roleDesc",
          key: "roleDesc",
        },
        {
          title: "操作",
          dataIndex: "options",
          key: "options",
          scopedSlots: { customRender: "options" },
        },
      ],
      data: [],
    };
  },
  created() {
    this.getRolesList();
  },
  methods: {
    async getRolesList() {
      const { data: res } = await this.$http.get("roles");
      if (res.meta.status !== 200) {
        return this.$message.info(res.meta.msg);
      }
      this.data = res.data.map((item, index) => {
        return {
          key: index,
          ...item,
        };
      });
      console.log(res);
    },
  },
};
</script>

<style lang="less" scoped>
</style>
